@import '../../app.less';
/**index.wxss**/

@chatTitleHeight: 60rpx;
@chatStandHeight: 300rpx;
@padding: 32rpx;

page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.viewFloat {
  position: absolute;
  display: flex;
  z-index: 1;
  width: calc(100% - 120rpx);
  bottom: 100rpx;
  color: white;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
  flex-direction: column;
  .videoTitle {
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-word;
    word-break: break-all;
    ._title {
      display: inline-block;
    }
    ._tag_name {
      display: inline-block;
    }
  }
  .videoDes {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.8);
    font-style: normal;
    font-weight: 500;
  }
}
.videoSwiper-isPlaying{
  position:absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  .imagePlayer {
    width: 144rpx;
    height: 144rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 1
  }
}

.muted-wrap{
  position: absolute;
  bottom:100rpx;
  right: 40rpx;
  .muted-img{
    width: 64rpx;
    height: 64rpx;
  }
}
.parts {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .video-part {
    width: 100%;
    height: calc(100% - @chatTitleHeight - @padding - 84rpx);
    transition: height 0.3s;
    will-change: height;
    // 减去对话区、标题 、边距、按钮
    &.smaller {
      height: calc(
        100% - @chatStandHeight - @chatTitleHeight - @padding - 120rpx - 84rpx
      );
    }
    .video-swiper{
      .video_item{
        width: 100%;
        height: 100%;
      }
      .video-right-model {
        position: fixed;
        padding: 24rpx 20rpx;
        border-radius: 70rpx;
        right: 40rpx;
        top: 50%;
        transform: translate(0, -50%);
        background: rgba(103, 101, 101, 0.4);
        .video-right-img {
          width: 70rpx;
          height: 70rpx;
          margin: 24rpx 0 0 0;
        }
        .video-right-model_item {
          color: #fff;
          text-align: center;
        }
        
        .video-right-model_item ._text {
          font-size: 24rpx;
        }
      }
      
    }
  }
  .chat-part {
    background: white;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    box-sizing: border-box;
    text-align: center;
    border: none !important;
    padding-top: 0rpx;
    .chat {
      color:#000;
      border: none !important;
      .title {
        height: @chatTitleHeight;
        line-height: @chatTitleHeight;
        text-align: center;
        font-weight: bold;
        font-size: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        border: none !important;
        padding-top: 32rpx;
        padding-bottom: 8rpx;

      }
    }
    .stand {
      height: 0rpx;
      transition: all 0.3s;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 16rpx;
      will-change: height;

      &.show {
        background-color: #f5f5f5;
        padding: 32rpx 0rpx;
        margin: 20rpx auto;
        height: calc(@chatStandHeight - 40rpx);
      }
      .master,
      .visitor {
        display: flex;
        align-items: center;
        @avatar-size: 96rpx;
        .avatar {
          width: @avatar-size;
          height: @avatar-size;
          border-radius: 50%;
          margin: 0 16rpx;
          text-align: center;
          line-height: @avatar-size;
          font-size: 48rpx;
          background-color: white;
          font-weight: bold;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        @audio-height: 80rpx;
        .audio {
          max-width: 400rpx;
          min-width: 120rpx;
          height: @audio-height;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          padding: 0rpx 16rpx;
          .completed {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .icon {
              display: flex;
              align-items: center;
              .icon-image {
                width: 100%;
                height: 100%;
              }
            }
            .time {
              color: balck;
              margin:8rpx;
            }
          }
          .pending {
            width: 100%;
            text-align: left;
            &.visitor-pending{
              text-align: right;
            }
          }
        }
      }
      .master {
        .avatar{
          background-color: transparent;
        }
        .audio {
          background-color: white;
        }
      }
      .visitor {
        margin-top: 16rpx;
        display: flex;
        justify-content: flex-end;
        .audio {
          background-color: #07c160;
          justify-content: flex-end;
          .completed{
            .icon{
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}

.record-btn {
  .btn-group {
    .primary-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      .image {
        width: 96rpx;
        height: 96rpx;
      }
      &.disabled{
        background: gray!important;
        pointer-events: none;
      }
    }
  }
}

// 录音页面
.reocrd-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, 0.8);
  z-index: 1000;
  padding-top: 280rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  &.show{
    top:0
  }

  .time-group {
    color: white;
    .time {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #e83a2f;
        margin-right: 10rpx;
      }
    }
    .time2 {
      display: flex;
      align-items: center;
      justify-content: center;
      .time2-inner {
        background-color: #333;
        border-radius: 8rpx;
        text-align: center;
        padding: 16rpx;
        color: white;
      }
    }
  }

  .progress-bar {
    margin: auto;
    margin-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 654rpx;
    height: 240rpx;
    text-align: center;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    &.default{
      background-color: #68ba45;
    }
    &.danger{
      background-color: #d86207;
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #95cf7d;
      
      &.danger {
        background-color: #e49151;
      }
    }
    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 400rpx;
      height: 180rpx;
      z-index: 10;
      .image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .arrow {
    // 向下的箭头
    width: 0;
    height: 0;
    border-left: 36rpx solid transparent;
    border-right: 36rpx solid transparent;
    border-top: 36rpx solid rgba(0, 0, 0, 0.1);
    margin: auto;
  }
  .bottom-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    .b-tip{
      color:white;
      text-align: center;
      margin-bottom: 64rpx;
      &.danger{
        color:#e49151;
      }
    }
    .close {
      margin: auto;
      width: 144rpx;
      height:144rpx;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .b-tip-2 {
      margin-top: 60rpx;
      text-align: center;
      height: 120rpx;
      color: white;
    }
    .banner {
      width: 100%;
      height: 284rpx;
      position: relative;
      margin-top: 32rpx;
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .image{
          width: 100%;
          height: 100%;
        }
      }
      .voice {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 73rpx;
        height: 103rpx;
        .image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.attach-content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10;
  .attach-video-wrap,.attach-img-wrap,.attach-web-wrap{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding:32rpx;
    .question-title{
      font-size: 48rpx;
      font-weight: bold;
    }
    .swiper-image,.image-wrap{
      width: 100%;
      height: 100%;
      .image{
        width: 100%;
        height: 100%;
      }
    }
   
  }
  .attach-web-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}